<template>
	<view>
		<view class="header">
			<view class="name"> {{name}} </view>
			<view class="con">{{con}}</view>
		</view>
		<view class="content">
			<view class="item" v-for="(item, i) in list" :key="i">
				<view class="title">{{item.questionnaireQuestion.questionnaireQuestionId}}、{{item.questionnaireQuestion.questionnaireSubjectContent}}</view>
				<radio-group>
					<label class="uni-list-cell uni-list-cell-pd" v-for="(op, j) in item.questionnaireOptions" :key="j">
						<view class="option">
							<radio @click="ans.splice(i,1,j)" :checked="ans[i]==j" />{{op.optionContent}}
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="footer">
			<view class="tip">
				<view v-for="(item, i) in list" :class="['ti', ans[i]==-1?'':'do']" :key="i">{{item.questionnaireQuestion.questionnaireQuestionId}}</view>
			</view>
			<button type="primary" @click="submit"><text class="iconfont">&#xe612;</text>提交</button>
		</view>
	</view>
</template>

<script>
	import {
		getQuestionnaireDetail,
		respondence
	} from '@/api/questionnaire.js'
	export default {
		data() {
			return {
				qid: '',
				name: '',
				con: '',
				list: [],
				ans: []
			}
		},
		methods: {
			getData() {
				getQuestionnaireDetail({
					questionnaireId: this.qid
				}).then(res => {
					// console.log(res.data.data)
					this.list = res.data.data[0].list
					this.ans = new Array(this.list.length).fill(-1)
				}).catch(err => {
					uni.showModal({
						content: '请求失败'
					})
				})

			},
			submit() {
				let obj = []
				for (let i in this.ans) {
					if (this.ans[i] == -1) {
						uni.showToast({
							icon: 'none',
							title: '尚未做答完成'
						})
						return
					} else {
						obj.push({
							questionnaireId: this.qid,
							questionnaireQuestionId: this.list[i].questionnaireQuestion.questionnaireQuestionId,
							answer: this.list[i].questionnaireOptions[this.ans[i]].optionType,
							id: getApp().globalData.id
						})
					}
				}
				let obj2 = {
					questionnaire: {
						questionnaireId: this.qid
					},
					questionnaireMember: {
						userId: getApp().globalData.id,
						questionnaireId: this.qid,
						answer: 1
					},
					list: []
				}
				for (let tmp in obj) {
					obj2.list.push({
						questionnaireQuestion: {
							questionnaireQuestionId: obj[tmp].questionnaireQuestionId
						},
						questionnaireAnswer: {
							questionnaireId: this.qid,
							questionnaireQuestionId: obj[tmp].questionnaireQuestionId,
							answer: obj[tmp].answer,
							id: getApp().globalData.id
						}
					})
				}
				uni.showModal({
					content:'您确定要提交？提交之后不可更改',
					cancelText:'我再想想',
					success(res1) {
						if(res1.confirm){
							respondence(obj2).then(res2 => {
								if (res2.data.code == 0) {
									uni.showModal({
										content: '提交成功',
										showCancel: false,
										success() {
											uni.navigateBack()
										}
									})
								}
							}).catch(err => {
								uni.showModal({
									content: '提交失败'
								})
							})
						}
					}
				})
			}
		},
		onLoad(option) {
			this.qid = option.qid
			this.name = option.name
			this.con = option.con
			this.getData()
		}
	}
</script>

<style>
	page{
		background-color: #FFFAEE;
		background-image: linear-gradient(#FFFAEE, #ffe0c5);
		font-family: 'Courier New', Courier, monospace;
	}
	
	.header {
		padding: 20px 10px;
		margin: 0 10px;
		border-radius: 20px;
		color: #646464;
		text-align: center;
		font-family: 'Courier New', Courier, monospace;
	}

	.header .name {
		font-size: 25px;
		/* text-align: center; */
	}

	.header .con {
		/* text-indent: 36px; */
		margin: 10px 0;
	}

	.content .item {
		margin: 10px 20px;
		padding: 10px;
		border: 1px dotted #C0C0C0;
		border-radius: 15px;
		background-color: #FFFFFF;
		box-shadow: 10px 10px 5px #888888;
	}

	.content .title {
		margin-bottom: 10px;
	}

	.content .option {
		border-bottom: 1px solid #dde5ed;
		border-radius: 5px;
		padding: 10rpx;
		margin-bottom: 10rpx;
	}

	.content .option radio {
		margin: 0 10px;
	}

	.footer {
		margin: 30px 20px 50px 20px;
	}

	.footer .tip {
		margin: 10px 0 20px 0;
	}

	.footer .tip .ti {
		display: inline-block;
		margin-left: 20px;
		margin-bottom: 20px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border: 1px solid #DDDDDD;
		box-shadow: 2px 2px 1px #888888;
	}

	.footer .tip .do {
		background-color: #fecbad;
	}
	.iconfont{
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin-right: 10px;
	}
</style>
